<template lang="pug">
#line
</template>

<script lang="ts" setup>
import {Line} from '@antv/g2plot'
import client, {org} from '@/service/influx'
import {onMounted} from 'vue'
import dayjs from 'dayjs'

const queryApi = client.getQueryApi(org)

const query = `from(bucket: "BMS")
  |> range(start: -5m)
  |> filter(fn: (r) => r["_measurement"] == "vehicle")
  |> filter(fn: (r) => r["_field"] == "acceleration_x" or r["_field"] == "acceleration_y"
  or r["_field"] == "acceleration_z")
  |> filter(fn: (r) => r["driver"] == "Anna Somerlie")
  |> aggregateWindow(every: 30s, fn: last, createEmpty: false)
  |> yield(name: "mean")`

const init = (data: []) => {
  const chart: HTMLElement = document.getElementById('line')!

  const ops = {
    data,
    autoFit: true,
    xField: '_time',
    yField: '_value',
    seriesField: '_field',
    xAxis: {
      type: 'cat',
      label: {
        autoRotate: false,
        formatter: (v: Date) => dayjs(v).format('HH:mm:ss')
      }
    },
    yAxis: {
      grid: {
        line: {
          style: {
            lineWidth: .5
          }
        }
      }
    },
    meta: {
      Date: {
        range: [.04, .96]
      }
    },
    point: {
      shape: 'circle',
      size: 2,
      style: () => {
        return {fillOpacity: 0, stroke: 'transparent'}
      }
    },
    ppendPadding: [0, 0, 0, 0],
    legend: false,
    smooth: true,
    lineStyle: {
      lineWidth: 1.5,
    },
    tooltip: {
      showMarkers: false,
      follow: false,
      position: 'top',
      customContent: () => null,
    },
    theme: {
      geometries: {
        point: {
          circle: {
            active: {
              style: {
                r: 4,
                fillOpacity: 1,
                stroke: '#000',
                lineWidth: 1,
              },
            },
          },
        },
      },
    },
    interactions: [{type: 'marker-active'}, {type: 'brush'}],
  }

  const line = new Line(chart, ops)

  line.render()


}


onMounted(() => {
  queryApi.collectRows(query).then(init)

})


</script>

<!--suppress JSUnusedGlobalSymbols -->
<script lang="ts">
export default {
  name: 'LineChart'
}
</script>

<style lang="scss" scoped>
#line {
  width: 220px;
  height: 220px;
}
</style>
